import 'package:flutter/material.dart';
import 'package:get/get.dart';
// import 'package:xin_he/page/shopping_car/models/xin_he_goods_model.dart';
import 'package:xin_he/page/shopping_car/xin_he_shopping_car/xin_he_shop_cart_goods_entity.dart';
import 'package:xin_he/utils/xin_he_image.dart';
import 'package:xin_he/utils/xin_he_user_data.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_order_utils.dart';
import '../../login/xin_he_login_action.dart';
import 'xin_he_shopping_car_logic.dart';

class XinHeShoppingCarPage extends StatelessWidget {
  XinHeShoppingCarPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeShoppingCarLogic());
  final state = Get.find<XinHeShoppingCarLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('购物车',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Obx(() => xinHeUserData.appLoginState.value == true ? (state.allItemsList.length>0?Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [


          SizedBox(
            height: 44,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15),
              child: Row(children: [
                Text(state.selectedItemsList.isNotEmpty ?'购物车商品(${state.goodsTypeCount.value})': "购物车商品",style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 14,fontWeight: FontWeight.w600,),),
                Spacer(),

                GestureDetector(
                    onTap: (){
                      state.isEditing.value = !state.isEditing.value;
                    },
                    child: Text(state.isEditing.value?'编辑':'完成',style: TextStyle(color: XinHeColor('#8B9191'),fontSize: 14,fontWeight: FontWeight.w500),))

              ],),
            ),
          ),

          ///list
          Expanded(child: ListView.builder(
              itemCount: logic.state.allItemsList.length,
              itemBuilder: (ctx,index){
                XinHeShopCartGoodsEntity model = logic.state.allItemsList[index];
                return Container(
                  margin: const EdgeInsets.symmetric(horizontal: 15),
                  decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(7)),

                  child:Column(children: [
                    SizedBox(
                      height: 44,
                      child: Row(children: [
                        // const XinHeAssetImage('assets/images/cart/cart_unselected.png',width: 18,height: 18,),
                        ///选择
                        GestureDetector(
                          onTap: (){
                            // model.selected = !model.selected;
                            // logic.state.allItemsList[index] = model;

                            logic.handleGoods(index);
                          },
                          child: Padding(
                            padding: const EdgeInsets.only(left: 15,right: 8),
                            child: XinHeAssetImage( model.isSelected?'assets/images/cart/cart_selected.png' :'assets/images/cart/cart_unselected.png',width:18 ,height: 18,),
                          ),
                        ),
                        SizedBox(width: 5,),
                        Text(XinHeOrderUtils.getZoneTitle(model.zoneType!),style: TextStyle(color: XinHeColor('#282C2C'),fontSize: 13,fontWeight: FontWeight.w500),),
                        SizedBox(width: 3,),
                        const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
                        Spacer(),


                      ],),),

                    ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: model.orderItems?.length,
                        itemBuilder: (ctx,ind){
                          XinHeShopCartGoodsOrderItems item = model.orderItems![ind];
                          return _itemView(item, ind, index);
                        }),

                  ],) ,
                );
              })),

          ///全选与结算
          Container(
            height: 45,
            alignment: Alignment.center,
            padding: const EdgeInsets.symmetric(horizontal: 15),
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border(top: BorderSide(width: 0.5,color:XinHeColor('#E7EEEE') ))
            ),
            child: Row(children: [
              // Row(
              //   mainAxisSize: MainAxisSize.min,
              //   children: [
              //     GestureDetector(
              //       onTap: (){
              //         state.isAllButtonSelected.value = !state.isAllButtonSelected.value;
              //         logic.handleAllItems(state.isAllButtonSelected.value);
              //
              //       },
              //       child: Padding(
              //         padding: const EdgeInsets.only(right: 5),
              //         child: XinHeAssetImage(logic.state.isAllButtonSelected.value?'assets/images/cart/cart_selected.png': 'assets/images/cart/cart_unselected.png',width:18 ,height: 18,),
              //       ),
              //     ),
              //     Container(
              //         alignment: Alignment.center,
              //         child: Text('全选',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 13,fontWeight: FontWeight.w500),))
              //
              //   ],),

              const Spacer(),
              RichText(text: TextSpan(
                  children: [

                    TextSpan(
                      text:'共计',
                      style: TextStyle(
                        color: XinHeColor('##2B3131'),
                        fontSize: 11,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    ///￥
                    TextSpan(
                      text: '￥',
                      style: TextStyle(
                        color: XinHeColor('#E84128'),
                        fontSize: 9,
                        fontWeight: FontWeight.w500,
                      ),
                    ),

                    ///
                    TextSpan(
                      text: state.totalPrice.value.toStringAsFixed(2),
                      style: TextStyle(
                        color: XinHeColor('#E84128'),
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ]
              )),

              GestureDetector(
                onTap: (){
                  logic.toPay();
                },
                child: Container(
                  height: 32,
                  margin: const EdgeInsets.only(left: 5),
                  padding: const EdgeInsets.only(left: 15,right: 15),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [XinHeColor('#F89A30'),XinHeColor('#E84128')]),
                      borderRadius: BorderRadius.circular(16)
                  ),
                  child: Text(state.selectedItemsList.isNotEmpty ?'结算(${state.goodsTypeCount.value})':'结算',
                    style: const TextStyle(color: Colors.white,fontSize: 14,fontWeight: FontWeight.w500),
                    strutStyle: const StrutStyle(forceStrutHeight: true),
                  ),
                ),
              )

            ],),
          )




        ],):Center(child:  Text('购物车暂无商品，赶快去添加吧~', style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w500)),)) : GestureDetector(
          onTap:  () {
              XinHeLoginAction.modalToLoginPage();
              },
          child: Center(child: Text('暂无商品，请先登录', style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w500)),))),
    );
  }

  Widget _itemView(XinHeShopCartGoodsOrderItems model,int index,int fatherIndex){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          width: Get.width-30,
          height: 120,
          child:  Row(
            children: [

              ///选择
              GestureDetector(
                onTap: (){
                  // model.selected = !model.selected;
                  // logic.state.allItemsList[index] = model;

                  logic.handleGoodsItem(index, fatherIndex);
                },
                child: Padding(
                  padding: const EdgeInsets.only(left: 15,right: 8),
                  child: XinHeAssetImage( model.isSelected?'assets/images/cart/cart_selected.png' :'assets/images/cart/cart_unselected.png',width:18 ,height: 18,),
                ),
              ),


               Padding(
                padding:  const EdgeInsets.only(left: 0,top: 15,right: 15,bottom: 15),
                child: XinHeNetImage(url: model.goodsIconPath??'',width: 90,height: 90,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-15-18-8-90-15,
                      child: Text(model.goodsName??'',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 20,),



                  SizedBox(
                    width: Get.width-30-15-18-8-90-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.goodsPrice}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        logic.state.isEditing.value
                            ? Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            GestureDetector(
                              onTap: (){
                                  // logic.handleItemCount(index, false);

                                  logic.modifyGoodsNumberShopCart(model, false,index,fatherIndex);
                              },
                              child: Container(
                                height: 23,
                                width: 23,
                                alignment: Alignment.center,
                                margin: const EdgeInsets.only(left: 10),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(11.5),
                                    border: Border.all(color: XinHeColor('#E9EFF0'),width: 0.5)
                                ),
                                child: Text('-',style: TextStyle(color:XinHeColor('#8B9191'),fontSize: 12,fontWeight: FontWeight.w500),
                                ),
                              ),
                            ),

                            Container(
                              height: 23,
                              margin: const EdgeInsets.only(left: 3),
                              padding: const EdgeInsets.symmetric(horizontal: 6),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: XinHeColor('#E9EFF0')

                              ),
                              child: Text('${model.goodsAmount}',style: TextStyle(color:XinHeColor('#8B9191'),fontSize: 12,fontWeight: FontWeight.w500),
                              ),
                            ),

                            GestureDetector(
                              onTap: (){
                                // logic.handleItemCount(index, true);
                                logic.modifyGoodsNumberShopCart(model, true,index,fatherIndex);

                              },
                              child: Container(
                                height: 23,
                                width: 23,
                                margin: EdgeInsets.only(left: 3),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(11.5),
                                    border: Border.all(color: XinHeColor('#E9EFF0'),width: 0.5)
                                ),
                                child: Text('+',style: TextStyle(color:XinHeColor('#8B9191'),fontSize: 12,fontWeight: FontWeight.w500),
                                ),
                              ),
                            ),


                          ],)
                            : Text('x${model.goodsAmount}',style: TextStyle(color: XinHeColor('#8B9191'), fontSize: 12, fontWeight: FontWeight.w500,)
                        ),
                        const SizedBox(width: 15,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        Positioned(
          bottom: 0,
          right: 15,
          child: Container(
            width: Get.width-30-30,
            color: XinHeColor('#E7EEEE'),
            height: 0.5,),
        )

      ],
    );
  }

}
